<template>
  <div class="p-4">
    <h2 class="mb-5 text-xl font-bold">SearchPro 组件测试</h2>
    <el-button @click="openSearchPro" type="primary">打开高级查询</el-button>

    <SearchPro
      ref="searchProRef"
      v-model:drawerShow="drawerVisible"
      @queryFunc="handleQueryFunc"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchPro from './index.vue'

const searchProRef = ref(null)
const drawerVisible = ref(false)

const openSearchPro = () => {
  if (searchProRef.value) {
    searchProRef.value.openDdrawer({
      drawerShow: true,
      tableId: 'test-table-id',
      CPARENT: 'test-parent',
      closeAfterSearchPro: false
    })
  }
}

const handleQueryFunc = (data) => {
  console.log('查询结果:', data)
}
</script>

<style scoped>
/* 使用 Tailwind CSS，无需自定义样式 */
</style>
